<template>
  <div class="store-list">
    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
        <div>
          <a-button type="primary" @click="visibleModal = true">添加</a-button>
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      rowKey="classId"
      bordered
      ellipsis
      style="margin-top: 10px"
    >
          <template #action="{ record }">
        <a-space>
          <a-button type="primary" size="small" @click="editClassId=record.classId"
          v-show="editClassId!=record.classId"
            >修改</a-button
          >
          <a-button
            v-show="record.classId == editClassId"
            @click="editSubmit(record)"
            :disabled="record.adminId == 10000"
            >保存</a-button
          >
        </a-space>
      </template>
      <template #className="{ record }">
         <div v-show="editClassId!=record.classId">{{record.className}}</div>
                 <a-input
          v-show="record.classId == editClassId"
          v-model:value="record.className"
        ></a-input>
      </template>
    </a-table>
    <a-modal v-model:visible="visibleModal" title="添加分类" @ok="addSubmit">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol"  ref="addForm" :model="addForm"  :rules="rules">
        <a-form-item label="分类名"  name="className">
          <a-input placeholder="请输入分类名" v-model:value="addForm.className"/>
        </a-form-item>
        <a-form-item label="父分类" name="classParent">
          <a-select placeholder="选择上级分类"  v-model:value="addForm.classParent">
            <a-select-option value="-1"> 无上级分类 </a-select-option>
             <a-select-option :value="item.classId" v-for="item in selectOption" :key="item.classId"> {{item.className}} </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: "分类ID",
    dataIndex: "classId",
    key: "classId",
    align: "center",
  },
  {
    title: "分类名",
    dataIndex: "className",
    key: "className",
    align: "center",
     slots: { customRender: "className" },
  },
  {
    title: "分类级别",
    dataIndex: "classGrade",
    key: "classGrade",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [

];
const selectOption=[]

import { BarsOutlined } from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';

export default {
  components: {
    BarsOutlined,
  },
  data() {
    return {
      labelCol: { span: 4 }, //表单标签宽度配置
      wrapperCol: { span: 14 }, //表单输入框宽度配置
      data,
      columns,
      selectOption,
      visibleModal: false, //添加分类框是否显示
      addForm:{
        classParent:'',
        className:''
      },
       rules: {
        classParent: [
          {
            type: "string",
            required: true,
            message: "选择分类名",
            trigger: "change",
          },
        ],
        className:[
          {
            type: "string",
            required: true,
            message: "请输入分类名",
            trigger: "blur",
          },
        ]
       },
       editClassId: "",
    };
  },

  mounted(){
      this.getData()
  },
  methods: {
    editSubmit(info) {
         this.editClassId = "";
      this.$axios
        .post("/admin/classification/edit", {
          classId: info.classId,
          className: info.className,
        })
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("修改成功");
            this.getData()
          } else {
            message.error("修改失败");
          }
        });
    },
    


     //获取数据
    getData() {
      this.$axios.get("admin/classification/all").then((res) => {
        this.data = res.data.data;
      });
      this.$axios.get("/admin/classification/father").then((res) => {
        this.selectOption = res.data.data;
      });
    },
        //提交 添加admin
    addSubmit() {
      this.$refs.addForm
        .validate()
        .then(() => {
          this.$axios
            .post("/admin/classification/add", {
              className: this.addForm.className,
              classParent: this.addForm.classParent,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("添加成功");
                this.getData();
                this.$refs.addForm.resetFields();
              } else {
                message.error("添加失败");
              }
              this.visibleModal = false;
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.store-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>